<template>
  <div class="consultation-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>咨询列表</span>
          <el-button type="primary" @click="handleExport">导出记录</el-button>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="咨询编号">
          <el-input v-model="searchForm.consultNo" placeholder="请输入咨询编号" />
        </el-form-item>
        <el-form-item label="咨询人">
          <el-input v-model="searchForm.consultant" placeholder="请输入咨询人" />
        </el-form-item>
        <el-form-item label="咨询状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="待回复" value="pending" />
            <el-option label="已回复" value="replied" />
            <el-option label="已关闭" value="closed" />
          </el-select>
        </el-form-item>
        <el-form-item label="咨询时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 咨询列表 -->
      <el-table :data="consultList" border style="width: 100%">
        <el-table-column prop="consultNo" label="咨询编号" width="180" />
        <el-table-column prop="consultant" label="咨询人" width="120" />
        <el-table-column prop="type" label="咨询类型" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="咨询标题" min-width="200" />
        <el-table-column prop="createTime" label="咨询时间" width="180" />
        <el-table-column prop="replyTime" label="回复时间" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleReply(scope.row)"
              v-if="scope.row.status === '待回复'"
            >
              回复
            </el-button>
            <el-button 
              type="info" 
              size="small" 
              @click="handleDetail(scope.row)"
            >
              详情
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click="handleClose(scope.row)"
              v-if="scope.row.status !== '已关闭'"
            >
              关闭
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 回复对话框 -->
    <el-dialog
      title="回复咨询"
      v-model="replyDialogVisible"
      width="600px"
    >
      <div class="consult-content">
        <h4>咨询内容：</h4>
        <p>{{ currentConsult.content }}</p>
      </div>
      <el-form :model="replyForm" :rules="replyRules" ref="replyFormRef" label-width="80px">
        <el-form-item label="回复内容" prop="content">
          <el-input 
            type="textarea" 
            v-model="replyForm.content" 
            rows="4"
            placeholder="请输入回复内容"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
          >
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">
                可上传图片、PDF等文件作为参考资料
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReply">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      title="咨询详情"
      v-model="detailDialogVisible"
      width="700px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="咨询编号">{{ currentConsult.consultNo }}</el-descriptions-item>
        <el-descriptions-item label="咨询状态">
          <el-tag :type="getStatusType(currentConsult.status)">
            {{ currentConsult.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="咨询人">{{ currentConsult.consultant }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ currentConsult.contact }}</el-descriptions-item>
        <el-descriptions-item label="咨询类型">
          <el-tag>{{ currentConsult.type }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="咨询时间">{{ currentConsult.createTime }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">咨询内容</el-divider>
      <div class="detail-content">
        <h4>{{ currentConsult.title }}</h4>
        <p>{{ currentConsult.content }}</p>
        <div class="attachment-list" v-if="currentConsult.attachments?.length">
          <h5>附件：</h5>
          <div class="attachments">
            <div 
              v-for="(file, index) in currentConsult.attachments" 
              :key="index"
              class="file-item"
            >
              <el-icon><Document /></el-icon>
              <span>{{ file.name }}</span>
              <el-button type="primary" link size="small" @click="downloadFile(file)">
                下载
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <el-divider content-position="left">回复记录</el-divider>
      <div class="reply-list">
        <div 
          v-for="(reply, index) in currentConsult.replies" 
          :key="index"
          class="reply-item"
        >
          <div class="reply-header">
            <span class="replier">{{ reply.replier }}</span>
            <span class="time">{{ reply.time }}</span>
          </div>
          <div class="reply-content">{{ reply.content }}</div>
          <div class="attachment-list" v-if="reply.attachments?.length">
            <div class="attachments">
              <div 
                v-for="(file, fileIndex) in reply.attachments" 
                :key="fileIndex"
                class="file-item"
              >
                <el-icon><Document /></el-icon>
                <span>{{ file.name }}</span>
                <el-button type="primary" link size="small" @click="downloadFile(file)">
                  下载
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document } from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  consultNo: '',
  consultant: '',
  status: '',
  dateRange: []
})

// 咨询列表数据
const consultList = ref([
  {
    consultNo: 'ZX20240318001',
    consultant: '张三',
    contact: '13800138000',
    type: '领养咨询',
    title: '关于领养金毛的相关问题',
    content: '我想领养一只金毛，请问有哪些注意事项？家里需要做哪些准备？',
    createTime: '2024-03-18 10:00:00',
    replyTime: '',
    status: '待回复',
    attachments: [],
    replies: []
  },
  {
    consultNo: 'ZX20240318002',
    consultant: '李四',
    contact: '13900139000',
    type: '医疗咨询',
    title: '猫咪发烧症状咨询',
    content: '我家猫咪今天精神不太好，感觉有点发烧，请问需要怎么处理？',
    createTime: '2024-03-18 09:00:00',
    replyTime: '2024-03-18 09:30:00',
    status: '已回复',
    attachments: [
      { name: '猫咪照片.jpg', url: '#' }
    ],
    replies: [
      {
        replier: '王医生',
        time: '2024-03-18 09:30:00',
        content: '建议先测量体温，如果超过39.5度需要及时就医。同时注意保暖和补充水分。',
        attachments: []
      }
    ]
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 回复对话框
const replyDialogVisible = ref(false)
const replyFormRef = ref(null)
const currentConsult = reactive({})
const replyForm = reactive({
  content: '',
  files: []
})

const replyRules = {
  content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
}

// 详情对话框
const detailDialogVisible = ref(false)

// 方法定义
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const resetSearch = () => {
  searchForm.consultNo = ''
  searchForm.consultant = ''
  searchForm.status = ''
  searchForm.dateRange = []
}

const getStatusType = (status) => {
  const types = {
    '待回复': 'warning',
    '已回复': 'success',
    '已关闭': 'info'
  }
  return types[status] || 'info'
}

const handleReply = (row) => {
  Object.assign(currentConsult, row)
  replyForm.content = ''
  replyForm.files = []
  replyDialogVisible.value = true
}

const handleDetail = (row) => {
  Object.assign(currentConsult, row)
  detailDialogVisible.value = true
}

const handleClose = (row) => {
  ElMessageBox.confirm('确认关闭该咨询吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('咨询已关闭')
  })
}

const handleExport = () => {
  ElMessage.success('导出功能待实现')
}

const handleFileChange = (file) => {
  replyForm.files.push(file.raw)
}

const downloadFile = (file) => {
  ElMessage.success('文件下载功能待实现')
}

const submitReply = async () => {
  if (!replyFormRef.value) return
  
  await replyFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('回复成功')
      replyDialogVisible.value = false
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.consult-content {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.consult-content h4 {
  margin: 0 0 10px 0;
  color: #606266;
}

.consult-content p {
  margin: 0;
  color: #303133;
}

.detail-content h4 {
  margin: 0 0 10px 0;
}

.detail-content p {
  margin: 0 0 15px 0;
  color: #606266;
  line-height: 1.6;
}

.attachment-list h5 {
  margin: 10px 0;
  color: #606266;
}

.attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.reply-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reply-item {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.replier {
  font-weight: bold;
  color: #303133;
}

.time {
  color: #909399;
  font-size: 12px;
}

.reply-content {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 